<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>我的装修</title>
    <meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <script src="http://www.17sucai.com/preview/1/2017-09-25/swiperTab/js/jquery.min.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_604068_4vmxn2vqtnapp66r.css" />

    <link rel="stylesheet" href="/static/css/css.css" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_604068_mskca9dc7wcm1jor.css" />
    <script src="/static/jquery-weui/js/jquery-2.1.4.js"></script>
    <script src="/static/jquery-weui/js/fastclick.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/jquery-weui/js/jquery-weui.js"></script>
    <link rel="stylesheet" href="/static/jquery-weui/css/weui.min.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/jquery-weui.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/demos.css">
<style>

    .weui-navbar__item.weui-bar__item--on {
        color: #fe8200;
        background-color: #f1f1f1;
    }

    button {
        background-color: #ffffff;
        color: black;
        border: 1px solid #fe8200;
        width: 60px;
        height: 30px;
        border-radius: 5px;
    }

    .workerBox1 {
        margin-top: 50px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow: auto;

    }

    .headTitle {
        position: fixed;
        border: 1px solid #f4f4f4;
        border-top: none;
        border-left: none;
        border-right: none;
        background: #fff;
        width: 100%;
        height: 44px;
        line-height: 44px;
    }

    .head {
        position: absolute;
        width: 100%;
        max-width: 640px;
        right: 0;
        margin: 0 auto;
        height: 44px;
        background: rgb(255, 255, 255);
        top: 0;
        left: 0;
        z-index: 3;
    }

    .head .title1 {
        text-align: center;
        font-size: 17px;
        margin: 0 8%;
        font-style: normal;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 100%;

    }

    .head a img {
        float: left;
        display: block;
        width: 100%;
        width: 10px;
        height: 16px;
        margin-left: 5%;
        margin-top: 14px;
    }

    .sousuo {
        position: absolute;
        top: 0px;
        right: 4%;
        color: black
    }

    .weui-navbar__item:after {
        content: " ";
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        bottom: 0;
        border-right: 0px solid #ccc;
        color: #ccc;
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
    }

    /*头部背景去除*/
    .weui-navbar__item.weui-bar__item--on {
        color: #fe8200;
        background-color: #ffffff;
    }

</style>
</head>

<body >
<header class="head headTitle" style="position: fixed;top: 0px;">
    <a class="back" href="{:url('/home/my/my')}" style="top: 0px;">
        <img src="/static/images/back_gray.png">
    </a>

    <h6 class="title1" style="line-height: 44px">我的装修</h6>


</header>

    <div class="weui-tab" style="margin-top: 55px"  >

        <div class="weui-tab__bd"  id="app">

            <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">

                <section class="workerBox1">

                    <div v-for="(item,index) in items" :data_id="item.id" style="clear: both;background: #ffffff;margin-top: 5px"  onclick="detail(this)">

                        <div style="height: 90px;border-bottom: 0.01rem solid #f4f4f4;">
                            <div  style="color: black">

                                <div style="width:30%;float: left;">
                                    <img style="width: 90%;height: 70px;padding: 5px"   :src="item.small_img">
                                </div>

                                <div style="width: 65%;float: left;padding: 5px;position: relative">
                                    <div style="position: absolute;left: 5px;font-size: 15px;clear: both">{{item.title}}</div>
                                    <div style="clear: both;margin-top:40px;position: relative;">
                                        <span  style="font-size: 8px; position: absolute;left: 5px">{{item.fenlei}}</span>
                                        <span  style="position: absolute;right: 30px;top: -2px"  class="icon icon-yanjing"></span>
                                        <span  style="font-size: 8px; position: absolute;right: 5px">{{item.click_rate}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>

                    <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>
                </section>
            </div>


        </div>


        <div class="weui-navbar" style="position: fixed;top: 44px ;background: #ffffff;border: 1px  solid  #f4f4f4">
            <a onclick="stat1(0)" class="weui-navbar__item weui-bar__item--on " href="#tab1">
                案例收藏
            </a>
            <a onclick="stat1(1)" class="weui-navbar__item" href="#tab1">
                文章收藏
            </a>

        </div>

    </div>


<script>

    //    以下为参考示例
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            is_none0: false,
            is_none1: false,
            cur_page: 1,
            flag: 4,
            limit: 8,
        }
    });

    var pages = 1;
    var loading = false;  //状态标记
    //var flag = 4;
    //滚动加载更多
    $(function () {
        //进入加载页面
        loadlist(flag);
        console.log("loadlist");
    });

    $(".workerBox1").infinite().on('infinite', function () {
        console.log("加载");
        loadlist(flag);
    });

    //ajax加载数据
    function loadlist(flag) {
        console.log(flag + "ffff");
        if (flag == 0) {
            app.is_none = app.is_none0;
            console.log(flag + "f0");
        } else if (flag == 1) {
            app.is_none = app.is_none1;
            console.log(flag + "f1");
        } else if (flag == 2) {
            app.is_none = app.is_none2;
            console.log(flag + "f2");
        } else if (flag == 3) {
            app.is_none = app.is_none3;
        } else if (flag == 4) {
            console.log(flag + "f4");
            app.is_none = app.is_none4;
        }

        if (!app.is_loading && app.is_none != true) {

            console.log(22222)
            app.is_loading = true;
            console.log(app.cur_page + "gg");

            $.post('xzx', {page: app.cur_page, limit: app.limit, flag: flag}, function (res) {
                console.log(app.cur_page + "vhg");

                console.log(res);

                app.is_loading = false;
                if (res.count > 0) {

                    if(app.cur_page==1){
                        app.items=res.data;
                    }else {
                        for (var index in res.data) {
                            app.items.push(res.data[index]);
                            console.log("data");
                        }
                    }

                    app.cur_page++;

                    // app.items=res.data;
                } else {
                    app.is_none = true;

                    if (flag == 0) {
                        app.is_none0 = true;
                    } else if (flag == 1) {
                        app.is_none1 = true;
                    } else if (flag == 2) {
                        app.is_none2 = true;
                    } else if (flag == 3) {
                        app.is_none3 = true;
                    } else if (flag == 4) {
                        app.is_none4 = true;
                    }

                }

            });
        }

    }

</script>

<script>
    function detail(that) {
        console.log("232");
        var id=$(that).attr('data_id');
        console.log(id);
        var s="xzx_detail?id="+id;
        console.log(s+'111');
        location.href=s;
    }
</script>
</body>



</html>
